<!--
 * @Descripttion: 核酸宝项目前端
 * @version: 
 * @Author: 杜宇轩
 * @Date: 2022-05-22 05:23:33
 * @LastEditors: 杜宇轩
 * @LastEditTime: 2022-05-22 06:19:38
-->
<template>
  <div>
    <img src="@/assets/background.jpg" class="background">
    
    <el-form
      ref="registerForm"
      :model="registerForm"
      :rules="registerRules"
      class="register_form"
      label-position="left"
    >
      <div class="register_header">
        <div class="icon">
          <img src="@/assets/icon.png" class="icon_pic">
          <div class="icon_title">核酸宝</div>
        </div>
      </div>
      <div class="register_box">
        <el-form-item prop="userId">
          <el-input
            v-model="registerForm.userId"
            prefix-icon="el-icon-postcard"
            placeholder="身份证号"
            name="userId"
            tabindex="1"
          />
        </el-form-item>
        <el-form-item prop="username">
          <el-input
            v-model="registerForm.username"
            prefix-icon="el-icon-user"
            placeholder="用户名"
            name="username"
            tabindex="2"
          />
        </el-form-item>
        <el-form-item prop="phoneNumber">
          <el-input
            v-model="registerForm.phoneNumber"
            prefix-icon="el-icon-phone-outline"
            placeholder="手机号"
            name="phoneNumber"
            tabindex="3"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="registerForm.password"
            prefix-icon="el-icon-lock"
            placeholder="密码"
            name="password"
            tabindex="4"
            show-password
          />
        </el-form-item>
        <el-form-item prop="password2">
          <el-input
            v-model="registerForm.password2"
            prefix-icon="el-icon-lock"
            placeholder="请再次输入密码"
            name="password2"
            tabindex="5"
            show-password
          />
        </el-form-item>
        <el-form-item prop="address">
          <el-input
            v-model="registerForm.address"
            prefix-icon="el-icon-house"
            placeholder="请输入现住址"
            name="address"
            tabindex="6"
            @keyup.enter.native="handleRegister"
          />
        </el-form-item>
        <el-form-item>
          <el-cascader
            v-model="registerForm.defaultRegion"
            :options="options"
            placeholder="请选择检测地点"
          />
        </el-form-item>
        <el-button
          class="registerButton"
          type="primary"
          @click.native.prevent="handleRegister"
        >
          注册
        </el-button>
        <el-button
          class="back2Login"
          type="primary"
          @click="$router.push('/login')"
        >
          返回登录
        </el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import {
  userRegister
} from '@/api/commonUser/userRegister';
export default {
  name: 'Register',
  data() {
    var checkuserId = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入身份证号'));
      } else {
        if (value.length !== 18) {
          callback(new Error('身份证号应为18位'));
        } else {
          var test = /^[1-9][0-9]{16}[0-9Xx]$/g;
          if (!test.test(value)) {
            callback(new Error('身份证号格式错误'));
          } else callback();
        }
      }
    };
    var checkUsername = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入用户名'));
      } else {
        if (value.length < 4 || value.length > 10) {
          callback(new Error('用户名长度必须为4到10位'));
        } else {
          var test = /^[0-9A-Za-z]+$/g;
          if (!test.test(value)) {
            callback(new Error('用户名只能由数字或字母构成'));
          } else callback();
        }
      }
    };
    var checkPhoneNumber = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入手机号'));
      } else {
        if (value.length !== 11) {
          callback(new Error('手机号应为11位'));
        } else {
          var test = /^[1-9][0-9]{10}$/g;
          if (!test.test(value)) {
            callback(new Error('手机号格式错误'));
          } else callback();
        }
      }
    };
    var checkPassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入密码'));
      } else {
        if (value.length < 8 || value.length > 16) {
          callback(new Error('密码长度必须为8到16位'));
        } else {
          var test1 = /[0-9]/g;
          var test2 = /[a-zA-Z]/g;
          var test3 = /^[0-9A-Za-z]+$/g;
          if (!test1.test(value)) {
            callback(new Error('密码必须包含数字'));
          } else if (!test2.test(value)) {
            callback(new Error('密码必须包含字母'));
          } else if (!test3.test(value)) {
            callback(new Error('密码只能由数字或字母构成'));
          } else {
            callback();
          }
        }
      }
    };
    var checkSame = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请再次确认密码'));
      } else {
        if (value !== this.registerForm.password) {
          callback(new Error('两次密码输入不一致'));
        } else callback();
      }
    };
    return {
      registerForm: {
        userId: '',
        username: '',
        phoneNumber: '',
        password: '',
        password2: '',
        defaultRegion: [],
        address: ''
      },
      registerRules: {
        userId: [{ required: true, trigger: 'blur', validator: checkuserId }],
        username: [{ required: true, trigger: 'blur', validator: checkUsername }],
        phoneNumber: [{ required: true, trigger: 'blur', validator: checkPhoneNumber }],
        password: [{ required: true, trigger: 'blur', validator: checkPassword }],
        password2: [{ required: true, trigger: 'blur', validator: checkSame }],
        defaultRegion: [{ required: true, message: '请选择检测地点' }],
        address: [{ required: true, message: '请输入现住址', trigger: 'blur' }]
      },
      options: [],
      loading: false
    }
  },
  created() {
    this.$store.dispatch('region/getAllInfo', 1).then((data) => {
      this.options = data;
    });
  },
  methods: {
    handleRegister() {
      this.$refs.registerForm.validate(valid => {
        if (valid) {
          this.loading = true;
          const input = {};
          input.userId = this.registerForm.userId;
          input.password = this.registerForm.password;
          input.type = 'CONSUMER';
          input.name = this.registerForm.username;
          input.defaultRegion = this.registerForm.defaultRegion[3];
          input.phoneNumber = this.registerForm.phoneNumber;
          input.address = this.registerForm.address;
          userRegister(input).then(() => {
            this.loading = false;
            this.$message.success('注册成功');
            this.$router.push('/login');
          });
        } else {
          console.error('error submit!!!');
          return false;
        }
      });
    }
  }
}
</script>

<style lang="scss">
.background {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0px;
  z-index: -1;
}

.register_form {
  width: 450px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: rgba(255,255,255,0.9);
  border-radius: 10px;
  box-shadow: 1px 1px 3px 3px rgba(0,0,0,0.2);
}

.register_header {
  font-size: 18px;
  margin: 30px 50px 0px 50px;
  cursor: default;

  .icon {
    display: flex;

    .icon_pic {
      height: 40px;
      width: 40px;
    }

    .icon_title {
      font-size: 30px;
      font-weight: bold;
      color: #FF9000;
      margin: 0px 0px 0px 10px;
    }
  }
}

.register_box {
  padding: 40px 50px;

  .registerButton {
    width: 100%;
    margin: center;
    margin: 10px 0px 10px 0px;
  }

  .back2Login {
    width: 100%;
    margin: center;
    margin-bottom: 10px;
  }

}

</style>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 25px;
}
.el-button+.el-button {
  margin: 10px 0px 0px 0px;
}
.el-cascader {
  width: 350px
}

</style>